<template>
	<div ref="chartRef" :style="{ width, height }"></div>
</template>
<script lang="ts" setup>
import { Ref, ref } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import type { PropType } from 'vue';
import { faultCauseStatistics } from '/@/api/analysis/index';
defineProps({
	width: {
		type: String as PropType<string>,
		default: '100%',
	},
	height: {
		type: String as PropType<string>,
		default: '100%',
	},
});

const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const getFaultCauseStatistics = (deviceModelId: string) => {
	faultCauseStatistics({ deviceModelId }).then((res) => {
		let total = 0,
			data = [];
		for (const k in res.data) {
			data.push({
				name: k,
				value: res.data[k],
			});
			total += parseInt(res.data[k]);
		}
		setOptions({
			tooltip: {
				trigger: 'item',
				position: 'top',
				formatter: '{b}: {d}%<br /> {c}',
			},
			legend: {
				orient: 'vertical',
				itemWidth: 12,
				itemHeight: 5,
				textStyle: {
					fontSize: 10,
				},
				show: true,
				top: 0,
				right: 0,
			},
			grid: { left: 20, top: 20, bottom: 20, right: 20, containLabel: true },
			graphic: [
				{
					type: 'text',
					// top: '41%',
					left: 'center',
					top: 'center',
					style: {
						text: `${total}`,
						fontSize: 18,
						fontWeight: 700,
					},
					tooltip: {
						show: false,
					},
				},
			],
			series: [
				{
					type: 'pie',
					z: 999,
					radius: ['50%', '70%'],
					// center: ['50%', '45%'],
					color: ['#00c997', '#4c84ff'],
					minAngle: 2,
					startAngle: 45,
					itemStyle: {
						borderColor: '#fff',
						borderWidth: 1,
					},
					label: {
						show: true,
						formatter: '{c}\n{d}%',
					},
					data: data,
					labelLine: {
						show: true,
					},
					animationType: 'scale',
					animationEasing: 'exponentialInOut',
					animationDelay: function () {
						return Math.random() * 400;
					},
				},
			],
		});
	});
};
onMounted(() => {
	setOptions({
		tooltip: {
			trigger: 'item',
			position: 'top',
			formatter: '{b}: {d}%<br /> {c}',
		},
		legend: {
			// type: 'scroll',
			orient: 'vertical',
			itemWidth: 12,
			itemHeight: 5,
			textStyle: {
				fontSize: 10,
			},
			show: true,
			top: 0,
			right: 0,
		},
		grid: { left: 20, top: 20, bottom: 20, right: 20, containLabel: true },
		graphic: [
			{
				type: 'text',
				top: '41%',
				left: 'center',
				style: {
					text: `0`,
					fontSize: 18,
					fontWeight: 700,
				},
				tooltip: {
					show: false,
				},
			},
		],
		series: [
			{
				type: 'pie',
				z: 999,
				radius: ['50%', '70%'],
				center: ['50%', '45%'],
				color: ['#00c997', '#4c84ff'],
				minAngle: 2,
				startAngle: 45,
				itemStyle: {
					borderColor: '#fff',
					borderWidth: 1,
				},
				label: {
					show: true,
					formatter: '{c}\n{d}%',
				},
				data: [],
				labelLine: {
					show: true,
				},
				animationType: 'scale',
				animationEasing: 'exponentialInOut',
				animationDelay: function () {
					return Math.random() * 400;
				},
			},
		],
	});
});
defineExpose({
	getFaultCauseStatistics,
});
</script>
